<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { listByIds } from "~/api/oss";

const props = defineProps({
  title: {
    type: String,
    default: '视频文件'
  },
  ossid: {
    type: [String, Number],
    required: true
  },
  originalName: {
    type: String,
    default: ''
  },
  mainPic: {
    type: String,
    default: ''
  }
});

const fileUrl = ref('');
const originalName = ref('');
const thumbUrl = ref('');
const durationText = ref('');
const loading = ref(true);

const fetchFileUrl = async () => {
  try {
    loading.value = true;
    const response = await listByIds(props.ossid.toString());
    if (response && response.data && response.data.length > 0) {
      fileUrl.value = response.data[0].url;
      originalName.value = response.data[0].originalName;
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

const fetchThumbUrl = async () => {
  if (!props.mainPic) return;
  if (props.mainPic.includes('http')) {
    thumbUrl.value = props.mainPic;
    return;
  }
  try {
    const res = await listByIds(props.mainPic.toString());
    if (res && res.data && res.data.length > 0) {
      thumbUrl.value = res.data[0].url;
    }
  } catch (e) {
  }
};

const computeDuration = () => {
  if (!fileUrl.value) return;
  const v = document.createElement('video');
  v.preload = 'metadata';
  v.src = fileUrl.value;
  v.onloadedmetadata = () => {
    const d = Math.floor(v.duration || 0);
    const mm = String(Math.floor(d / 60)).padStart(2, '0');
    const ss = String(d % 60).padStart(2, '0');
    durationText.value = `${mm}:${ss}`;
  };
};

onMounted(() => {
  fetchFileUrl();
  fetchThumbUrl();
});

watch(fileUrl, () => computeDuration());

const playVideo = () => {
  if (fileUrl.value) {
    window.open(fileUrl.value, '_blank');
  }
};
</script>

<template>
	<div class="video-item" @click="playVideo">
		<div class="thumb">
			<img v-if="thumbUrl" :src="thumbUrl" class="thumb-img" alt="" />
			<div v-else class="thumb-placeholder"></div>
			<span class="time-badge">{{ durationText || '00:00' }}</span>
		</div>
		<div class="caption">
			<p class="file-name">{{ originalName || props.title }}</p>
		</div>
	</div>
</template>

<style scoped lang="scss">
.video-item {
  width: 384px;
  background: #ffffff;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: 0 0 16px rgba(11, 13, 18, 0.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-item:hover {
  box-shadow: 0 4px 20px rgba(11, 13, 18, 0.12);
  transform: translateY(-2px);
}

.thumb {
  position: relative;
  height: 216px;
}

.thumb-img,
.thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-placeholder {
  background: #f5f5f5;
}

.time-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
}

.caption {
  background: #ffffff;
  padding: 12px 16px;
}

.file-name {
  font-size: 14px;
  color: #191e28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
</style>